<div class="flex justify-between items-center p-4">
  <div class="flex items-center">
    <img src="/assets/logo.svg" class="w-8 h-8" >
    <span class="pac-home-title text-2xl" routerLink="/home">{{'PAC.title.short' | translate}}</span>
  </div>

  <div class="flex gap-4">
    <button mat-button routerLink="/project">
      {{ 'PAC.KEY_WORDS.Story' | translate: {Default: "Story"} }}
    </button>
    <button mat-button routerLink="/indicator/market">
      {{ 'PAC.KEY_WORDS.IndicatorMarket' | translate: {Default: "Indicator Market"} }}
    </button>
    <button mat-button routerLink="/models">
      {{ 'PAC.KEY_WORDS.SemanticModel' | translate: {Default: "Semantic Model"} }}
    </button>
  </div>
</div>

<div class="max-w-full w-full flex flex-col px-8 py-4 overflow-auto">

  <div class="flex justify-between items-center">
    <div class="text-xl my-4">
      {{ 'PAC.MENU.HOME.Trending' | translate: {Default: "Trending"} }}
    </div>
    <div class="flex items-center gap-2" displayDensity="cosy">
      <div>
        {{ 'PAC.KEY_WORDS.SortBy' | translate: {Default: 'Sort By'} }}:
      </div>
      <mat-button-toggle-group [(ngModel)]="orderType" ngmAppearance="outline" color="accent" >
        <mat-button-toggle value="visits">
          {{ 'PAC.KEY_WORDS.Visits' | translate: {Default: 'Visits'} }}
        </mat-button-toggle>
        <mat-button-toggle value="update">
          {{ 'PAC.KEY_WORDS.UpdatedDate' | translate: {Default: 'Updated Date'} }}
        </mat-button-toggle>
      </mat-button-toggle-group>
      <ngm-search [formControl]="searchControl"></ngm-search>
    </div>
  </div>

  <div class="max-w-full w-full grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3" waIntersectionObserver waIntersectionThreshold="0.5"
    [@listAnimation]="trends.length">
    <pac-story-card *ngFor="let story of trends; trackBy: trackById"
        storyLink="/public/story"
        [story]="story"
        [highlight]="highlight">
    </pac-story-card>

    <div *ngIf="!done" class="col-span-3 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3" (waIntersectionObservee)="onIntersection()">
      <div *ngFor="let item of [1,2,3]" class="border shadow rounded-md p-4 w-full mx-auto dark:border-white/10">
        <div class="animate-pulse flex space-x-4">
          <div class="h-24 w-20 bg-slate-200 dark:bg-white/10"></div>
          <div class="flex-1 space-y-6 py-1">
            <div class="h-2 rounded bg-slate-200 dark:bg-white/10"></div>
            <div class="space-y-3">
              <div class="grid grid-cols-3 gap-4">
                <div class="h-2 rounded col-span-2 bg-slate-200 dark:bg-white/10"></div>
                <div class="h-2 rounded col-span-1 bg-slate-200 dark:bg-white/10"></div>
              </div>
              <div class="h-2 rounded bg-slate-200 dark:bg-white/10"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>